<template>
    <div class="me">
        <!-- 顶上两个功能 -->
        <div class="my-title">
            <div></div>
            <div class="my-title-func">
                <div class="func-sao"></div>
                <div class="func-set"></div>
            </div>
        </div>
        <!-- 头像/登陆注册 -->
        <div v-if="!isLogin" class="user" @click="goLogin">
            <div class="user-title">
                <div class="user-headImg">
                    <img class="auto-img" src="@/assets/icon/Mj5.png" alt="">
                </div>
                <div>登陆/注册</div>
            </div>
        </div>
        <div v-else class="user">
            <div class="user-title">
                <div class="user-headImg">
                    <img class="auto-img" :src="userLogin.user.avatar" alt="">
                </div>
                <div>{{ userLogin.user.nickname }}</div>
            </div>
        </div>
        <!-- 钱包卡卷网鱼币 -->
        <div v-if="!isLogin" class="wallet">
            <div class="wallet-item">
                <div class="wallet-item-icon">
                    <img class="auto-img" src="@/assets/icon/g8.png" alt="">
                </div>
                <div class="wallet-item-name">钱包</div>
            </div>
            <div class="wallet-item">
                <div class="wallet-item-icon">--
                </div>
                <div class="wallet-item-name">卡卷</div>
            </div>
            <div class="wallet-item">
                <div class="wallet-item-icon">--
                </div>
                <div class="wallet-item-name">网鱼币</div>
            </div>
        </div>
        <div v-else class="wallet">
            <div class="wallet-item">
                <div class="wallet-item-icon">
                    <img class="auto-img" src="@/assets/icon/g8.png" alt="">
                </div>
                <div class="wallet-item-name">钱包</div>
            </div>
            <div class="wallet-item">
                <div class="wallet-item-icon">{{ userLogin.user.account.storedValueCash }}
                </div>
                <div class="wallet-item-name">卡卷</div>
            </div>
            <div class="wallet-item">
                <div class="wallet-item-icon">{{ userLogin.user.account.storedValueGive }}
                </div>
                <div class="wallet-item-name">网鱼币</div>
            </div>
        </div>
        <!-- 我的订单 -->
        <div class="order">
            <div class="order-title">
                <p>我的订单</p>
                <div class="all-order">
                    <p @click="goMyOrder">全部订单</p>
                    <div class="all-order-icon"></div>
                </div>
            </div>
            <div class="order-item">
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/dE.png">
                    </div>
                    <p>线上商城</p>
                </div>
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/9o1.png">
                    </div>
                    <p>预约订单</p>
                </div>
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/Q0.png">
                    </div>
                    <p>预订酒店</p>
                </div>
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/5s.png">
                    </div>
                    <p>自助点餐</p>
                </div>
            </div>
        </div>
        <!-- 我的会员 -->
        <div class="myVIP">
            <p>我的会员</p>
            <div class="myVIP-bg">
                <div class="myVIP-bg-text">
                    <div class="myVIP-bg-icon"></div>
                    <div class="myVIP-bg-txt">
                        <p>网鱼电竞鱼乐卡会员</p>
                        <span>升级享更多优惠</span>
                    </div>
                </div>
                <div class="myVIP-bg-buy">购买</div>
            </div>
        </div>
        <!-- 我的工具 -->
        <div class="order">
            <div class="order-title">
                <p>我的订单</p>
            </div>
            <div class="order-item">
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/c2.png">
                    </div>
                    <p>收藏</p>
                </div>
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/dE.png">
                    </div>
                    <p>在线客服</p>
                </div>
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/mX.png">
                    </div>
                    <p>兑换优惠</p>
                </div>
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/2x.png">
                    </div>
                    <p>帮助与反馈</p>
                </div>
                <div class="order-func-item">
                    <div class="item-icon">
                        <img class="auto-img" src="@/assets/icon/BK.png">
                    </div>
                    <p>加入我们</p>
                </div>

            </div>
        </div>
        <!-- 兑换我的好礼 -->
        <div class="exchange">
            <p>兑换我的好礼</p>

            <van-swipe :loop="false" :width="140" :show-indicators="false">
                <van-swipe-item v-for="(item, index) in reactiveList.productList" :key="index">
                    <div class="gift-img">
                        <img class="auto-img" :src="item.pic" alt="">
                    </div>
                    <p>{{ item.name }}</p>
                    <div class="gift-price">
                        <p>{{ item.currency }}</p>
                        <div class="gift-price-icon"></div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>

</template>

<script setup lang="ts">
import { getMyExchange } from '@/api/api'
import { reactive, onMounted, ref } from 'vue'
import type { MeExchangeList, LoginDataList } from '@/tsList/homeFunts'
import { useRouter, useRoute } from 'vue-router'
//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useAdmin } from "@/stores/counter"

//使用pinia
const store = useAdmin()  //使用公开的方法
let { userData } = storeToRefs(store)  //拿到方法里定义的值

const reactiveList = reactive<{ productList: Array<MeExchangeList> }>({
    productList: []
})

const router = useRouter()

//变量控制登陆状态
const isLogin = ref(false)

//登陆信息
const userLogin = reactive<LoginDataList>({
    currentMobile: null,
    existingMobile: null,
    multiLoginId: null,
    newComerPackageUrl: null,
    newMemberTicketStatus: false,
    page: '',
    token: '',
    type: null,
    user: {
        account: {
            storedValueCash: 0,
            storedValueGive: 0
        },
        aliInfo: {},
        aliRpRecord: null,
        appleInfo: null,
        //头像
        avatar: '',
        birthday: null,
        city: null,
        flags: null,
        memberCardNo: null,
        //手机号
        mobile: '',
        // 用户名
        nickname: '',
        openCardInfo: {},
        province: null,
        qqInfo: null,
        realName: null,
        sex: null,
        //用户id
        userId: '',
        wechatInfo: null
    },
    verifyStatus: null
})

function goMyOrder() {
router.push({
    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
    path: '/MyOrder',
})
}

onMounted(() => {
    // console.log(userData.value.token);
    getMyExchange().then((res) => {
        // console.log(res.data);
        reactiveList.productList = res.data.productList
    })
    
    if (localStorage.getItem("userInfo")) {
        let tokenvalue = localStorage.getItem("userInfo")
        let lastname = eval("("+tokenvalue+")");
        isLogin.value = true
        userLogin.token = lastname.token
        userLogin.user = lastname.user
    }
})

function goLogin() {
    router.push({
        //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path: '/LoginView'
    })
}

</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.me {
    padding: 10px 10px 90px;
    background-image: linear-gradient(#f3f4fd, #f8f8fa);
    min-height: 100vh;

    .my-title {
        display: flex;
        justify-content: space-between;

        .my-title-func {
            display: flex;

            .func-sao {
                width: 20px;
                height: 20px;
                background-image: url('@/assets/icon/El.png');
                background-size: cover;
                margin-right: 10px;
            }

            .func-set {
                width: 20px;
                height: 20px;
                background-image: url('@/assets/icon/SZ.png');
                background-size: cover;
            }
        }
    }

    .user {
        margin-top: 10px;

        .user-title {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: 600;

            .user-headImg {
                width: 30px;
                height: 30px;
                border-radius: 999px;
                background-color: black;
                margin-right: 10px;
            }
        }
    }

    .wallet {
        display: flex;
        justify-content: space-between;
        padding: 20px 35px 10px;

        .wallet-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .wallet-item-icon {
                width: 24px;
                height: 24px;
                font-size: 13px;
                font-weight: 600;
                color: #8d8e8f;
                text-align: center;
            }

            .wallet-item-name {
                font-size: 12px;
                color: #8d8e8f;
            }
        }
    }

    .order {
        background-color: white;
        padding: 10px 10px;
        border-radius: 5px;
        margin-top: 10px;

        .order-title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            p {
                font-weight: 600;
                font-size: 13px;
            }

            .all-order {
                display: flex;
                align-items: center;
                color: #8d8e8f;
                transform: scale(.8);

                .all-order-icon {
                    width: 8px;
                    height: 18px;
                    margin-left: 5px;
                    background-image: url('@/assets/icon/6B1.png');
                }
            }
        }

        .order-item {
            padding: 10px 0 0;
            display: flex;
            width: 100%;

            .order-func-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;

                .item-icon {
                    width: 20px;
                    height: 20px;
                    margin-bottom: 5px;
                }

                p {
                    font-size: 12px;
                    color: black;
                    transform: scale(.9);
                }
            }
        }
    }

    .myVIP {
        background-color: white;
        padding: 10px 10px;
        border-radius: 5px;
        margin-top: 10px;

        p {
            font-weight: 600;
            font-size: 13px;
            padding: 10px 0;
        }

        .myVIP-bg {
            height: 50px;
            padding: 10px 10px;
            border-radius: 5px;
            background-image: url('@/assets/background/Po1.png');
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .myVIP-bg-text {
                display: flex;
                align-items: center;
                justify-content: center;

                .myVIP-bg-icon {
                    width: 15px;
                    height: 13px;
                    background-size: cover;
                    margin-right: 10px;
                    background-image: url('@/assets/icon/d8.png');
                }

                .myVIP-bg-txt {
                    display: flex;
                    flex-direction: column;
                    transform: scale(.9);
                    // transform-origin: 0 0;
                    font-size: 12px;

                    p {
                        color: #9c7127;
                        padding: 0;
                        margin: 0;
                    }

                    span {
                        font-size: 12px;
                        color: #b78835;
                    }
                }

            }

            .myVIP-bg-buy {
                font-size: 12px;
                color: #e8d3ad;
                border-radius: 999px;
                padding: 2px 10px;
                background-color: #bc821e;
                background-image: linear-gradient(#cf9632, #af7511);
                transform: scale(.9);
                transform-origin: 0 0;
            }
        }
    }

    .exchange {
        background-color: white;
        padding: 10px 10px;
        border-radius: 5px;
        margin-top: 10px;

        p {
            font-weight: 600;
            font-size: 13px;
            padding: 10px 0;
        }

        /deep/.van-swipe-item {
            margin-right: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            padding: 10px 10px;

            .gift-img {
                width: 100%;
                height: 135px;
            }

            p {
                font-size: 12px;
                font-weight: 400;
                padding: 0;
            }

            .gift-price {
                display: flex;
                align-items: center;

                p {
                    font-size: 12px;

                }

                .gift-price-icon {
                    width: 10px;
                    height: 10px;
                    background-image: url('@/assets/icon/Kl.png');
                    background-size: cover;
                }
            }
        }
    }
}
</style>